<div id="data-scroll" class="masking-tenways {% unless section.settings.masking %} masking-tenways {% endunless %}{% if section.settings.include_margins %}page-width{% endif %}">
  <div class="animate__animated wow animate__zoomIn bg-with-image fill-width">
    <div class="bg-image">
      <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
    >
      {%- if section.settings.image != blank -%}
        <img
          srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
          src="{{ section.settings.image | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image.alt | escape }}"
          loading="lazy"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      </div>
      <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      {%- if section.settings.image_mobile != blank -%}
        <img
          srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
          src="{{ section.settings.image_mobile | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image_mobile.alt | escape }}"
          loading="lazy"
          width="{{ section.settings.image_mobile.width }}"
          height="{{ section.settings.image_mobile.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      </div>
    </div>
    
     <div class="animate__animated wow animate__fadeInUp bg-text">
      <div class="page-width">
        <div class="bg_page-width ">
          {%- for block in section.blocks -%}
          {%- case block.type -%}
          {%- when 'heading' -%}
            <h2 class="h1" {{ block.shopify_attributes }}>{{ block.settings.heading | escape }}</h2>
          {%- when 'paragraph' -%}
            <div class="bg__subheading rte bg__subheading-{{ forloop.index0 }}" {{ block.shopify_attributes }}>{{ block.settings.text }}</div>
            {%- when 'buttons' -%}
              <div class="ten-button banner__buttons{% if block.settings.button_label != blank and block.settings.button_link != blank  %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
                {%- if block.settings.button_label != blank -%}
                <a{% if block.settings.button_link != blank %} target="_blank" href="{{ block.settings.button_link }}"{% endif %} class="tenways_button-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                    {{ block.settings.button_label | escape }}
                  </a>
                {%- endif -%}
              </div>
           
            {%- endcase -%}
          {%- endfor -%}
        </div>
      </div>
    </div>
  </div>

  
  <div id="the-chip">
      <div class="svg-icon">
        <div class="page-width">
          {% render 'cgo600-pro' %}
        </div>
      </div>
  </div>
</div>


<script>
  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }


    function initScrollMagic() {
      const scrollOpacity = document.querySelector(".scroll-opacity");
      const theChip = scrollOpacity.querySelector("#the-chip");
      const svgIcon = scrollOpacity.querySelector("#svg-pro");

      const bgController = new ScrollMagic.Controller();

      let scene = new ScrollMagic.Scene({
        duration: 1500,
        triggerElement: scrollOpacity,
        triggerHook: 0
      })
      .setPin(scrollOpacity)
      .addTo(bgController); 

      const svgAnim = TweenMax.fromTo(svgIcon, 2, { scale: 15 }, { scale: 1 });
      const chipAnim = TweenMax.fromTo(theChip, 2, { opacity: 0 }, { opacity: 1 });
  
       let scene1 = new ScrollMagic.Scene({
         duration: 1000,
         triggerElement: scrollOpacity,
         triggerHook: 0
        })
         .setTween(svgAnim)
         .addTo(bgController);
  
        let scene2 = new ScrollMagic.Scene({
           duration: 1000,
           triggerElement: scrollOpacity,
           triggerHook: 0
         })
         .setTween(chipAnim)
         .addTo(bgController);   
    }
  
    if( !tooSmall ) {
      initScrollMagic();
    }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( bgController !== null && bgController !== undefined ) {
          bgController = bgController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( bgController === null || bgController === undefined ) {
          initScrollMagic();
        }
      }
    });


  })
</script>




{% schema %}
  {
    "name": "Background images new",
    "tag": "section",
    "class": "spaced-section background-images scroll-opacity",
    "settings": [
      {
        "type": "checkbox",
        "id": "masking",
        "label": "Masking",
        "default": false
      }, {
        "type": "checkbox",
        "id": "include_margins",
        "default": true,
        "label": "t:sections.apps.settings.include_margins.label"
      }, {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      }, {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Mobile image"
      }
    ],
    "blocks": [
      {
        "type": "heading",
        "name": "heading",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "heading",
            "label": "Heading"
          }
        ]
      }, {
        "type": "image",
        "name": "image",
        "limit": 1
      }, {
        "type": "paragraph",
        "name": "paragraph",
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Be the first to know about new collections and exclusive offers.</p>",
            "label": "Paragraph"
          }
        ]
      }, {
        "type": "buttons",
        "name": "buttons",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "Button label",
            "info": "Button label"
          }, {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }, {
            "type": "checkbox",
            "id": "button_style_secondary",
            "default": false,
            "label": "background-1"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Background images new"
      }
    ]
  }
{% endschema %}